<template>
	<div class="pending-page">
		<div class="left-page">
			<div class="flex left-top">
				<div class="title">报警记录</div>
				<div class="info">
					共{{ listDataTableAttr?.total }}条记录
					<global-svg-icon
						icon-name="refresh"
						width="16px"
						height="16px"
						style="margin-left: 6px; cursor: pointer"
						@click="refreshList"
					></global-svg-icon>
				</div>
			</div>

			<div v-if="listDataTableAttr?.total === 0" style="display: flex; justify-content: center; align-items: center; height: 80%">
				<global-svg-icon icon-name="empty" width="200px" height="72px" style="color: #4e596a"></global-svg-icon>
			</div>

			<vue-scroll v-else @handle-scroll="handlePageScroll">
				<div ref="scrollable">
					<div :key="item.id" v-for="(item, index) in recordList" class="card-container">
						<ul class="card-ul">
							<li :class="[tabActiveIndex === index && 'active']" @click="ClickTabItem(item, index)">
								<div class="list-avatar">
									<img
										:src="item.imageUrl"
										:onerror="
											(e: Event) => {
												(e.target as HTMLImageElement).src = defaultImage;
												(e.target as HTMLImageElement).onerror = null;
											}
										"
									/>
								</div>
								<div class="card-text">
									<div class="item-meta-title description">
										{{ item?.algorithmName }}
									</div>
									<div class="description item-senceName">
										{{ item?.areaLinkName }}
									</div>
									<div class="description item-deviceName">
										{{ item?.deviceName }}
									</div>
									<div class="description item-eventTime">
										{{ item?.boxName }}
									</div>
								</div>
							</li>
						</ul>
					</div>
					<infinite-loading :firstload="false" @infinite="load">
						<template #spinner>
							<div class="loading-style"></div>
						</template>
						<template #complete>
							<div class="loading-style">没有更多了...</div>
						</template>
					</infinite-loading>
				</div>
			</vue-scroll>
		</div>

		<div class="right-page">
			<div class="container">
				<div style="width: calc(100% - 316px); height: 100%">
					<img v-if="JSON.stringify(leftList) !== '{}'" :src="leftList?.imageUrl" alt="" style="width: 100%; height: 100%" />
				</div>

				<div class="all-person-box">
					<div class="alarm-person-title">人员信息</div>
					<div class="person-list">
						<div :key="item.id" v-for="item in personList" class="person-item" @click="updatePersonInfo(item.id)">
							<div class="edit-btn">
								<i class="iconfont icon-edit-line edit-icon"></i>
							</div>

							<div class="person-img-box">
								<img :src="!item.detectImage ? defaultImage : item.detectImage" class="person-img" alt="" @error="imgError" />
								<img :src="!item.imageLocation ? defaultImage : item.imageLocation" class="person-img" alt="" @error="imgError" />
							</div>

							<div class="person-info">
								<div class="name-num">
									<span class="name">{{ item.personName }}</span>
									<span class="num">{{ item.number ? `(${item.number})` : '' }}</span>
								</div>

								<div class="info">{{ `部门：${item.deptStr ? item.deptStr : ''}` }}</div>
								<div class="info">{{ `管理员：${c_manageName(item.managerList)}` }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right-title">
				<div>
					<div>
						<div :class="[!leftList?.algorithmName ? '' : 'alarm-name']">
							{{ leftList?.algorithmName }}
						</div>
						<div class="address">{{ leftList?.areaLinkName }}</div>
					</div>

					<div v-if="c_ShowBtns" class="_button">
						<a-button
							:loading="btnLoading2"
							class="btn-default"
							:disabled="listDataTableAttr?.total === 0"
							@click="changeStatusDebounce(2)"
						>
							未通过
						</a-button>

						<a-button :loading="btnLoading1" type="primary" :disabled="listDataTableAttr?.total === 0" @click="changeStatusDebounce(1)">
							通过
						</a-button>
					</div>
				</div>
				<div class="tiem">{{ leftList?.createTime }}</div>
			</div>
		</div>

		<edit-alarm-person-info
			ref="editVisibleRef"
			@ok="
				() => {
					ClickTabItem(recordList[tabActiveIndex as number], tabActiveIndex);
				}
			"
		></edit-alarm-person-info>
	</div>
</template>

<script setup lang="ts">
import httpServe from '@/global-services/index';
import InfiniteLoading from 'v3-infinite-loading';
import defaultImage from '@/global-assets/imgs/img-none.png';

import editAlarmPersonInfo from '@/view-modules/alarm-center/components/editAlarmPersonInfo.vue';
import { AlarmCenterAPI } from '../../../api';
interface DeviceListProps {
	tableAttr?: any;
}
const props = withDefaults(defineProps<DeviceListProps>(), {
	// eslint-disable-next-line no-empty-function
	tableAttr: () => {}
});

const editVisibleRef = ref();
const $message: any = inject('$message');

const imgError = (event: any) => {
	console.log('imgError', event);
	let img = event.srcElement;
	img.src = defaultImage;
	img.onerror = null;
};

// 获取报警记录列表
const c_manageName = computed(() => {
	return (params: any[]) => {
		if (!params) {
			return '';
		}
		return params.map((i) => i.name).join(',');
	};
});
const recordList = ref<Record<string, any>[]>([]);
const scrollNum = ref<number>(2);
const listDataTableAttr = ref<any>([]);
const scrollable = ref<HTMLElement>();
const btnLoading2 = ref(false);
const btnLoading1 = ref(false);
const tabActiveIndex = ref<number | string>(0);
const leftList = ref<Record<string, any>>({});
const personList = ref<Record<string, any>>([]);
const ClickTabItem = async (listItem: any, index?: any): Promise<void> => {
	if (!listItem) {
		leftList.value = {};
		personList.value = [];
		return;
	}
	leftList.value = listItem;
	tabActiveIndex.value = index;
	// 右侧列表, 根据报警ID查询违规人员列表
	const res: TsRes = await httpServe.getHttp(`/base/warning-details/${listItem.id}`)();
	if (res.code === 0) {
		personList.value = res.data;
	}
};
const getAlarmList = async (current: number = 1, isReset: boolean = true, deviceIds: string | null = null): Promise<void> => {
	let res = await AlarmCenterAPI.list({
		current: current,
		areDeviceIdList: deviceIds,
		pageSize: 50,
		auditType: 0,
		...props.tableAttr.searchObj
	});
	if (res.data) {
		if (isReset) {
			recordList.value = [];
			listDataTableAttr.value = {};
			recordList.value = res.data;
			listDataTableAttr.value = res;
			ClickTabItem(recordList.value[0], 0);
		} else {
			scrollNum.value++;
			recordList.value = recordList.value.concat(res.data);
			listDataTableAttr.value = res;
		}
	}
};
const c_ShowBtns = computed(() => {
	if (recordList.value.length) {
		return recordList.value[tabActiveIndex.value as number].malgorithmId !== 100;
	}
	return false;
});

const load = async ($state: { complete: () => void }): Promise<void> => {
	if (listDataTableAttr.value.data.length === 0) {
		$state.complete();
		return;
	}

	getAlarmList(scrollNum.value, false);
};
const headerBottomBorderColor = ref('transparent');
const handlePageScroll = (vertical: Record<string, any>): void => {
	headerBottomBorderColor.value = vertical.scrollTop > 10 ? '#20305b' : 'transparent';
};

// 通过/未通过方法
const changeStatusDebounce = async (type: number = 0) => {
	console.log('通过/未通过方法');

	type === 2 ? (btnLoading2.value = true) : (btnLoading1.value = true);
	try {
		let params = {
			id: leftList.value.id,
			auditType: type,
			pageMark: 0
		};
		let res: TsRes = await AlarmCenterAPI.updateAuditStatus(params);
		if (res.code === 0) {
			$message.success(res.message);

			nextTick(() => {
				recordList.value = recordList.value.filter((row: Record<string, any>) => row.id !== leftList.value.id);
				ClickTabItem(recordList.value[0], tabActiveIndex.value);
			});
			listDataTableAttr.value.total--;
			listDataTableAttr.value.length--;
			type === 2 ? (btnLoading2.value = false) : (btnLoading1.value = false);
		}
	} catch (error) {
		console.log('error', error);
	} finally {
		type === 2 ? (btnLoading2.value = false) : (btnLoading1.value = false);
	}
};

// 刷新列表
const refreshList = () => {
	getAlarmList(1, true);
	$message.success('刷新成功');
};

// const watchEffectStop = watchEffect(() => {
// 	// if (listDataTableAttr.value) {
// 	// 	ClickTabItem(recordList.value[0], 0);
// 	// }
// 	// if (props.tableAttr) {
// 	// 	ClickTabItem(recordList.value[0], 0);
// 	// }
// });
watch(
	() => props.tableAttr.searchObj,
	() => {
		getAlarmList();
	},
	{
		deep: true
		// immediate: true
	}
);

onUnmounted(() => {
	// watchStop();
	// watchEffectStop();
});
import dayjs from 'dayjs';
// 根据传入的天数，获取以当前时间基准的时间范围
const GetTimeRange = (day: number): void => {
	const createBegin = dayjs()
		.subtract(day - 1, 'days')
		.startOf('day')
		.format('YYYY-MM-DD HH:mm:ss');
	const createEnd = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');

	// eslint-disable-next-line vue/no-mutating-props
	props.tableAttr.searchObj.startTime = createBegin;
	// eslint-disable-next-line vue/no-mutating-props
	props.tableAttr.searchObj.endTime = createEnd;
};

const updatePersonInfo = (rowId: string | number) => {
	editVisibleRef.value?.openModal(rowId);
};

defineExpose({
	getAlarmList
});

onMounted(() => {
	GetTimeRange(1);
	getAlarmList();
});
</script>

<style lang="less" scoped>
.loading-style {
	text-align: center;
	color: @white;
}

.flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pending-page {
	display: flex;
	overflow: hidden;
	height: 100%;

	.left-page {
		width: 364px;
		height: calc(100vh - 28px - 36px - 110px);
		padding: 16px 20px 100px 0;
		color: #fff;

		.left-top {
			border-bottom: 1px solid @borderColor02;
			padding-bottom: 5px;
		}

		.title {
			font-size: 14px;
			font-weight: 700;
			line-height: 22px; /* 157.143% */
			color: @text02;
		}

		.info {
			font-size: 12px;
			line-height: 20px; /* 166.667% */
			color: @text03;
		}

		// 左侧卡片
		.card-container {
			margin-top: 20px;

			.card-ul {
				li {
					display: flex;
					width: 334px;
					height: 114px;
					border: 1px solid @borderColor02;
					border-radius: 8px;
					background: #0c1629;
					background-blend-mode: color;
					cursor: pointer;
					align-items: center;

					&.active {
						border: 2px solid @primary02;
						border-radius: 8px;
						background: @mask04;
					}

					.list-avatar {
						overflow: hidden;
						width: 168px;
						height: 108px;
						margin-right: 10px;
						flex: 1;
						border-radius: 2px;

						img {
							width: 168px;
							height: 108px;
							object-fit: cover; /* 图片填充容器并裁剪溢出部分 */
							object-position: center; /* 图片居中显示 */
						}
					}

					.card-text {
						width: calc(334px - 178px);
						padding: 0 12px;
						flex: 1;

						.item-meta-title {
							margin-top: 4px;
							font-size: 14px;
							font-weight: 700;
							line-height: 22px;
							color: @text01;
						}

						.description {
							overflow: hidden; /* 隐藏超出容器的内容 */
							white-space: nowrap; /* 防止换行 */
							text-overflow: ellipsis; /* 当文字超出容器时显示省略号 */
						}

						.item-senceName {
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
							color: @text02;
						}

						.item-deviceName {
							width: 82px;
							font-size: 12px;
							font-weight: 400;
							line-height: 20px;
							color: @text03;
						}

						.item-eventTime {
							margin-top: 10px;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
							color: @text01;
						}
					}
				}
			}
		}
	}

	.right-page {
		height: calc(100vh - 28px - 36px - 80px);
		margin: 16px 32px 0 0;
		flex: 1;

		.container {
			display: flex;
			height: calc(100% - 210px);
			color: #fff;
			background: #0e1c32;
			align-items: center;
			justify-content: center;

			img {
				width: calc(100% - 316px);
				height: 100%;
			}

			.all-person-box {
				width: 316px;
				height: 100%;
				border-left: 1px solid #2b3a50;
				background: #161f31;

				.alarm-person-title {
					padding: 16px 24px 8px;
					font-size: 14px;
					font-weight: 700;
					line-height: 22px;
					color: @text03;
				}

				.person-list {
					display: flex;
					overflow-y: auto;
					height: calc(100% - 46px);
					padding: 0 24px;
					flex-direction: column;
					gap: 7px;

					.person-item {
						position: relative;
						display: flex;
						overflow: hidden;
						max-width: 268px;
						height: 82px;
						border-radius: 6px;
						padding: 8px;
						background: #0e1624;
						cursor: pointer;
						flex-shrink: 0;
						align-items: center;
						gap: 7px;

						&:hover {
							background: linear-gradient(0deg, rgba(240, 246, 252, 0.1) 0%, rgba(240, 246, 252, 0.1) 100%), #0e1624;

							.edit-btn {
								display: block;
							}
						}

						.edit-btn {
							position: absolute;
							top: 0;
							right: 0;
							display: none;
							width: 18px;
							height: 18px;
							border-radius: 0 0 0 8px;
							line-height: 18px;
							text-align: center;
							background: rgba(240, 246, 252, 0.1);

							.edit-icon {
								font-size: 14px;
								color: rgba(176, 181, 192, 1);
							}
						}

						.person-img-box {
							display: flex;
							gap: 4px;

							.person-img {
								width: 64px;
								height: 64px;
								border-radius: 4px;
							}
						}

						.img-scene {
							width: 64px;
							height: 64px;
							margin-right: 4px;
						}

						.person-info {
							flex: 1;
							overflow: hidden;

							.name-num {
								overflow: hidden;
								margin-bottom: 4px;
								font-size: 14px;
								line-height: 20px;
								white-space: nowrap;
								text-overflow: ellipsis;
								color: @text02;

								.name {
									font-weight: 700;
									color: @text01;
								}

								.number {
									font-size: 12px;
									font-weight: 400;
									color: @text02;
								}
							}

							.info {
								overflow: hidden;
								font-size: 12px;
								line-height: 20px;
								white-space: nowrap;
								text-overflow: ellipsis;
								color: @text03;
							}
						}
					}
				}
			}
		}

		.right-title {
			div {
				display: flex;
				align-items: center;
				margin-top: 6px;
				justify-content: space-between;

				.alarm-name {
					display: flex;
					// width: 60px;
					height: 20px;
					border-radius: 4px;
					padding: 0 6px;
					font-family: 'Alimama FangYuanTi VF';
					font-size: 12px;
					font-weight: 500;
					font-style: normal;
					line-height: 20px;
					color: @text01;
					background: @secondary03;
				}

				.address {
					margin-left: 3px;
					font-size: 16px;
					font-weight: 700;
					font-style: normal;
					line-height: 24px; /* 150% */
					color: @text02;
				}
			}

			.tiem {
				font-size: 12px;
				font-weight: 400;
				font-style: normal;
				line-height: 20px; /* 166.667% */
				text-align: center;
				color: @text02;
			}

			._button {
				.btn-default {
					margin-right: 8px;
				}
			}
		}
	}
}
</style>
